<template>
    <div class="rootMain">
        <el-menu
            :default-active="activeIndex"
            class="el-menu-demo"
            mode="horizontal"
            @select="handleSelect"
            active-text-color="#409EFF"
            text-color="#333333"
        >
            <el-menu-item
                class="menuItem"
                v-for="(item, index) in menuList"
                :key="index"
                :index="item.index"
                >{{ item.name }}</el-menu-item
            >
        </el-menu>

        <!-- 个人资料 -->
        <template v-if="activeIndex == '1'">
            <!-- 展示资料 -->
            <userInfoShow v-if="showInfo"></userInfoShow>

            <!-- 修改资料 -->
            <userInfoEdit v-if="!showInfo"></userInfoEdit>
        </template>

        <!-- 密码 -->
        <template v-else>
            <!-- 修改密码 -->
            <password-edit v-if="userInfo && userInfo.password != ''"></password-edit>
            <!-- 设置 -->
            <passwordSet v-if="userInfo && userInfo.password == ''"></passwordSet>
        </template>
    </div>
</template>

<script>
import { mapState, mapMutations } from 'vuex'

import passwordEdit from '@/components/userCenter/mySet/passwordEdit'
import passwordSet from '@/components/userCenter/mySet/passwordSet'
import userInfoEdit from '@/components/userCenter/mySet/userInfoEdit'
import userInfoShow from '@/components/userCenter/mySet/userInfoShow'

export default {
    components: {
        passwordEdit,
        passwordSet,
        userInfoEdit,
        userInfoShow,
    },
    name: 'mySet',
    head() {
        return {
            title: "个人中心-账户设置",
            meta: [],
        };
    },
    data() {
        return {
            activeIndex: '1', //菜单
            menuList: [
                {
                    name: '个人资料',
                    index: '1',
                },
                {
                    name: '修改密码',
                    index: '2',
                },
            ],
        }
    },
    computed: {
        ...mapState('common', {
            userInfo: (state) => state.userInfo,
        }),
        ...mapState('userCenter', {
            showInfo: (state) => state.showInfo,
        }),
    },
    methods: {
        handleSelect(index) {
            this.activeIndex = index
        },
    },
}
</script>

<style lang="scss" scoped>
.rootmain {
    background-color: #fff;
    margin-left: 20px;
    // min-height: 480px;
}

::v-deep .el-menu-demo {
    margin-left: 20px;
}
::v-deep .is-active {
    border-bottom-color: white !important;
}
</style>./myset.vue
